<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="css/one.css" />
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="http://statics.webkfa.com/js/iscroll.js"></script>

		<script type="text/javascript">
			var myScroll,
				pullDownEl, pullDownOffset,
				pullUpEl, pullUpOffset,
				generatedCount = 0;

			function pullDownAction() {
				setTimeout(function() { // <-- Simulate network congestion, remove setTimeout from production!
					var el, li, i;
					el = document.getElementById('thelist');
					alert("下拉");

					myScroll.refresh(); // Remember to refresh when contents are loaded (ie: on ajax completion)
				}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
			}

			function pullUpAction() {
				setTimeout(function() { // <-- Simulate network congestion, remove setTimeout from production!
					var el, li, i;
					el = document.getElementById('thelist');
					alert("上拉");
					for(i = 0; i < 3; i++) {
						li = document.createElement('li');
						li.innerHTML = '<div class="row"><div class="row_a"><div class="row_aa"><img class="row_aaa" src="img/qq.jpg" /><img class="row_aab" src="img/sex.png" /></div><div class="row_ab"><div class="row_aba"><span>欧阳老师</span><small>36岁</small></div><div class="row_abb"><div><img src="img/y.png" /><span>10年</span></div><div><img src="img/s.png" /><span>博士</span></div><div><img src="img/m.png" /><span>100-300/小时</span></div></div><div class="row_abc"><span>高中数学老师</span></div></div></div><div class="row_b"><p>善于归纳知识系统、题型分类并在总结出相应解题思路，启发学生思维</p></div></div>';
						el.appendChild(li, el.childNodes[0]);
					}

					myScroll.refresh(); // Remember to refresh when contents are loaded (ie: on ajax completion)
				}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
			}

			function loaded() {
				pullDownEl = document.getElementById('pullDown');
				pullDownOffset = pullDownEl.offsetHeight;
				pullUpEl = document.getElementById('pullUp');
				pullUpOffset = pullUpEl.offsetHeight;

				myScroll = new iScroll('wrapper', {
					useTransition: true,
					topOffset: pullDownOffset,
					onRefresh: function() {
						if(pullDownEl.className.match('加载中')) {
							pullDownEl.className = '';
							pullDownEl.querySelector('.pullDownLabel').innerHTML = '刷新成功...';
						} else if(pullUpEl.className.match('加载中')) {
							pullUpEl.className = '';
							pullUpEl.querySelector('.pullUpLabel').innerHTML = '下拉刷新...';
						}
					},
					onScrollMove: function() {
						if(this.y > 5 && !pullDownEl.className.match('flip')) {
							pullDownEl.className = 'flip';
							pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手刷新...';
							this.minScrollY = 0;
						} else if(this.y < 5 && pullDownEl.className.match('flip')) {
							pullDownEl.className = '';
							pullDownEl.querySelector('.pullDownLabel').innerHTML = '刷新成功...';
							this.minScrollY = -pullDownOffset;
						} else if(this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
							pullUpEl.className = 'flip';
							pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手刷新...';
							this.maxScrollY = this.maxScrollY;
						} else if(this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
							pullUpEl.className = '';
							pullUpEl.querySelector('.pullUpLabel').innerHTML = '下拉刷新...';
							this.maxScrollY = pullUpOffset;
						}
					},
					onScrollEnd: function() {
						if(pullDownEl.className.match('flip')) {
							pullDownEl.className = '加载中';
							pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
							pullDownAction(); // Execute custom function (ajax call?)
						} else if(pullUpEl.className.match('flip')) {
							pullUpEl.className = '加载中';
							pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
							pullUpAction(); // Execute custom function (ajax call?)
						}
					}
				});

				setTimeout(function() {
					document.getElementById('wrapper').style.left = '0';
				}, 800);
			}

			document.addEventListener('touchmove', function(e) {
				e.preventDefault();
			}, false);

			document.addEventListener('DOMContentLoaded', function() {
				setTimeout(loaded, 400);
			}, false);
		</script>
	</head>

	<body>
		<div id="box">
			<div class="header">
				<a href='javascript:alert("跳转到搜索页面...");'><input type="text" value="" placeholder="点击搜索..."/></a>
			</div>
			<div class="screen">
				<div id="tj">
					<span><a>推荐</a><img src="img/triangle.png"/></span>
				</div>
				<p class="line"></p>
				<div id="sx">
					<span>要求 <img src="img/triangle.png"/></span>
				</div>
			</div>
			<div class="oneList">
				<div class="formShadow"></div>
				<div class="xzList">
					<a href="#" id="tuijian">推荐<span></span></a>
					<a href="#" id="zuixin">最新<span></span></a>
				</div>
			</div>
			<div class="formList">
				<div class="formShadow"></div>
				<form action="" method="post">
					<div>
						<span>年级</span>
						<input id="g1" type="radio" name="grade" value="g1" checked/>
						<label for="g1">全部</label>

						<input id="g2" type="radio" name="grade" value="g2" />
						<label for="g2">小学</label>

						<input id="g3" type="radio" name="grade" value="g3" />
						<label for="g3">初中</label>

						<input id="g4" type="radio" name="grade" value="g4" />
						<label for="g4">高中</label>
					</div>
					<div>
						<span>学科</span>
						<input id="s1" type="radio" name="subject" value="s1" checked/>
						<label for="s1">全部</label>

						<input id="s2" type="radio" name="subject" value="s2" />
						<label for="s2">语文</label>

						<input id="s3" type="radio" name="subject" value="s3" />
						<label for="s3">数学</label>

						<input id="s4" type="radio" name="subject" value="s4" />
						<label for="s4">英语</label>
					</div>
					<div>
						<span>教学经验</span>
						<input id="e1" type="radio" name="experience" value="e1" checked/>
						<label for="e1">全部</label>

						<input id="e2" type="radio" name="experience" value="e2" />
						<label for="e2">一年以内</label>

						<input id="e3" type="radio" name="experience" value="e3" />
						<label for="e3">1-5年</label>

						<input id="e4" type="radio" name="experience" value="e4" />
						<label for="e4">5-10年</label>

						<input id="e5" type="radio" name="experience" value="e5" />
						<label for="e5">10年以上</label>
					</div>
					<div class="form-footer">
						<input type="reset" value="重置" />
						<input type="submit" value="确定" style="background: #ee7621;" />
					</div>
				</form>
			</div>
			<div class="list">
				<div id="wrapper">
					<div id="scroller">
						<div id="pullDown">
							<span class="pullDownIcon"></span><span class="pullDownLabel">松手刷新...</span>
						</div>
						<ul id="thelist">
							<li>
								<div class="row">
									<div class="row_a">
										<div class="row_aa">
											<img class="row_aaa" src="img/qq.jpg" />
											<img class="row_aab" src="img/sex.png" />
										</div>
										<div class="row_ab">
											<div class="row_aba">
												<span>李老师</span>
												<small>36岁</small>
											</div>
											<div class="row_abb">
												<div><img src="img/y.png" /><span>10年</span></div>
												<div><img src="img/s.png" /><span>博士</span></div>
												<div><img src="img/m.png" /><span>100-300/小时</span></div>
											</div>
											<div class="row_abc">
												<span>高中数学老师</span>
											</div>
										</div>
									</div>
									<div class="row_b">
										<p>善于归纳知识系统、题型分类并在总结出相应解题思路，启发学生思维</p>
									</div>
								</div>
							</li>
							<li>
								<div class="row">
									<div class="row_a">
										<div class="row_aa">
											<img class="row_aaa" src="img/qq.jpg" />
											<img class="row_aab" src="img/sex.png" />
										</div>
										<div class="row_ab">
											<div class="row_aba">
												<span>李老师</span>
												<small>36岁</small>
											</div>
											<div class="row_abb">
												<div><img src="img/y.png" /><span>10年</span></div>
												<div><img src="img/s.png" /><span>博士</span></div>
												<div><img src="img/m.png" /><span>100-300/小时</span></div>
											</div>
											<div class="row_abc">
												<span>高中数学老师</span>
											</div>
										</div>
									</div>
									<div class="row_b">
										<p>善于归纳知识系统、题型分类并在总结出相应解题思路，启发学生思维</p>
									</div>
								</div>
							</li>
							<li>
								<div class="row">
									<div class="row_a">
										<div class="row_aa">
											<img class="row_aaa" src="img/qq.jpg" />
											<img class="row_aab" src="img/sex.png" />
										</div>
										<div class="row_ab">
											<div class="row_aba">
												<span>李老师</span>
												<small>36岁</small>
											</div>
											<div class="row_abb">
												<div><img src="img/y.png" /><span>10年</span></div>
												<div><img src="img/s.png" /><span>博士</span></div>
												<div><img src="img/m.png" /><span>100-300/小时</span></div>
											</div>
											<div class="row_abc">
												<span>高中数学老师</span>
											</div>
										</div>
									</div>
									<div class="row_b">
										<p>善于归纳知识系统、题型分类并在总结出相应解题思路，启发学生思维</p>
									</div>
								</div>
							</li>
						</ul>
						<div id="pullUp">
							<span class="pullUpIcon"></span><span class="pullUpLabel">松手刷新...</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			$('#main').refresh({
				pullFunction: function(ms, callback) {
					setTimeout(function() {
						alert("刷新成功")
						callback();

					}, ms)
				},
			})
		</script>
		<div class="white"></div>
		</div>
		<div class="footer">
			<div>
				<a href="#">
					<img src="img/f1.png" />
					<span>名师</span>
				</a>
			</div>
			<div>
				<a href="#">
					<img src="img/f2.png" />
					<span>消息</span>
				</a>
			</div>
			<div>
				<a href="#">
					<img src="img/f3.png" />
					<span>我的</span>
				</a>
			</div>
		</div>
		</div>
		<script>
			$(document).ready(function() {
				$("#sx").click(function() {
					if($(".formList").is(':hidden')) {
						$("#sx").addClass("sx");
					} else {
						$("#sx").removeClass("sx");
					}
					$("#tj").removeClass("sx");
					$(".oneList").hide();
					$(".formList").toggle();
				})
				$("#tj").click(function() {
					if($(".oneList").is(':hidden')) {
						$("#tj").addClass("sx");
					} else {
						$("#tj").removeClass("sx");
					}
					$("#sx").removeClass("sx");
					$(".formList").hide();
					$(".oneList").toggle();
				})
				$("#tuijian").click(function() {
					if($("#tuijian").text() == "推荐") {
						$("#tj span a").text("推荐");
						$("#tuijian").css("color", "#ee7621")
						$("#tuijian span").css("opacity", "1")
						$("#zuixin span").css("opacity", "0")
						$("#zuixin").css("color", "black")
					}
					$("#tj").removeClass("sx");
					$(".oneList").hide();
				})
				$("#zuixin").click(function() {
					if($("#zuixin").text() == "最新") {
						$("#tj span a").text("最新");
						$("#zuixin").css("color", "#ee7621")
						$("#zuixin span").css("opacity", "1")
						$("#tuijian span").css("opacity", "0")
						$("#tuijian").css("color", "black")
					}
					$("#tj").removeClass("sx");
					$(".oneList").hide();
				})
				$(".formShadow").click(function() {
					$(".formList").hide();
					$(".oneList").hide();
					$("#sx").removeClass("sx");
					$("#tj").removeClass("sx");
				})
			})
		</script>
	</body>

</html>